<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
<table border="1px">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
    <br>
<script>
    //定义数组用来模拟从后端请求回来的商品数据
    let productArr = [
        {title:'小米手机',price:5000,num:100},
        {title:'华为手机',price:6000,num:200},
        {title:'苹果手机',price:7000,num:300},
        {title:'三星手机',price:8000,num:400},
        {title:'OPPO手机',price:9000,num:500},
    ]
    //1.获取用来展示数据的表格元素
    let tableE = document.querySelector('table');
    //2.遍历数组，遍历道济件商品，就生成几行
    for (let i = 0; i < productArr.length; i++) {
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
    //给当前单元格设置值
    titleTd.innerHTML = productArr[i].title;
    priceTd.innerHTML = productArr[i].price;
    numTd.innerHTML = productArr[i].num;
    //将单元格存入tr中
    trE.append(titleTd,priceTd,numTd);
    //将tr存入table中
    tableE.append(trE);}
    arr.push({
            title: productArr[i].title,
            price: productArr[i].price,
            num: productArr[i].num
        });
    console.log(arr);

</script>
</body>
</html>